<!DOCTYPE html>
<html">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>游戏中心</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/game.css">
</head>
<body>
    <div class="container">
        <div class="st-container">
            <!-- nav begin -->
            <input type="radio" name="radio-set" checked="checked" id="st-container-1">
            <a href="#st-panel-1">Serendipity</a>
            <input type="radio" name="radio-set" id="st-container-2">
            <a href="#st-panel-2">Happiness</a>
            <input type="radio" name="radio-set" id="st-container-3">
            <a href="#st-panel-3">Tranquillity</a>
            <input type="radio" name="radio-set" id="st-container-4">
            <a href="#st-panel-4">Positivity</a>
            <input type="radio" name="radio-set" id="st-container-5">
            <a href="#st-panel-5">Passion</a>
            <!-- nav end -->
            <!-- content begin -->
            <div class="st-scroll">
                <section class="st-panel" id="st-panel-1">
                    <div class="st-desc" data-icon="H"></div>
                    <h2>Serendipity</h2>
                    <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
                </section>
                <section class="st-panel" id="st-panel-2">
                    <div class="st-desc" data-icon="2"></div>
                    <h2>Happiness</h2>
                    <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
                </section>
                <section class="st-panel" id="st-panel-3">
                    <div class="st-desc" data-icon="B"></div>
                    <h2>Tranquillity</h2>
                    <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
                </section>
                <section class="st-panel" id="st-panel-4">
                    <div class="st-desc" data-icon="x"></div>
                    <h2>Serendipity</h2>
                    <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
                </section>
                <section class="st-panel" id="st-panel-5">
                    <div class="st-desc" data-icon="c"></div>
                    <h2>Positivity</h2>
                    <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
                </section>
            </div>
            <!-- content end-->
        </div>
    </div>

</body>
</html>